<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { setTableHeight, setFixedColumnWidth } from '@/common/utils'
import useUserList,{actionKeys} from './userList'
import useRoleList from '@/views/sysAuth/role/roleList'
import searchPanel from '@/components/SearchPanel'
import Add from './add.vue'
import Update from './update.vue'
import {useModalDraggable} from "@/hooks/useModalDraggable"


const columns = ref<objType[]>([
	{
		title: '用户名',
		dataIndex: 'userName',
		key: 'userName',
		width: 120,
		align: 'center',
	},
	{
		title: '拥有的角色',
		dataIndex: 'roleNames',
		key: 'roleNames',
		width: 120,
		align: 'center',
		ellipsis: true,
	},
	{
		title: '昵称',
		dataIndex: 'nickName',
		key: 'nickName',
		width: 120,
		align: 'center',
	},
	{
		title: '操作',
		key: 'operation',
		fixed: 'right',
		align: 'center',
		// width: 125,
	},
])
const isSearching = ref(false)
const searchList = ref<RoleItem[]>([])
const tableHeight = ref<number>()
const addModalVisible = ref(false)
const updateModalVisible = ref(false)
const addModalTitle='新增用户'
const updateModalTitle='更新用户'
const editUser = ref({} as userType)
const searchOptions=ref<searchOptionType[]>([
	{type:'input',id:'userName',props:{label:'用户名'}},
	{type:'input',id:'nickName',props:{label:'昵称'}},
	{type:'select',id:'role',props:{label:'角色'},innerComponentProps:{showSearch:true,optionFilterProp:'label',options:[
		//  { label: '商品类型1', value: '1' },
	],
	}},
])

useModalDraggable(addModalVisible,addModalTitle)
useModalDraggable(updateModalVisible,updateModalTitle)

const userList = useUserList()
const roleList=useRoleList()

onBeforeMount(() => {
	userList.getList()
	searchOptions.value.forEach(v=>{
		if(v.id==='role')  
		v.innerComponentProps!.options=roleList.list.map(v=>({label:v.roleName,value:v.roleName}))
	})
})

onMounted(() => {
	setFixedColumnWidth([actionKeys.update,actionKeys.delete],columns)
})

function handleSearchPanelcollapsed(h:number){
     setTableHeight({tableHeightRef:tableHeight,otherSectionHeight:h}) 
}

function search(value:objType){
	 let _searchList=JSON.parse(JSON.stringify(userList.list))
   if(value.userName) _searchList=_searchList.filter((v:userType)=>v.userName===value.userName)
   if(value.nickName) _searchList=_searchList.filter((v:userType)=>v.nickName===value.nickName)
   if(value.role) _searchList=_searchList.filter((v:userType)=>v.roles.includes(value.role))
	 searchList.value=_searchList
	 isSearching.value=true
}

function reset() {
	isSearching.value = false
	userList.getList()
}
function handleAdd() {
	addModalVisible.value = true
}
function handleAddModalClose(isSuccess: boolean) {
	addModalVisible.value = false
	if (isSuccess) {
		message.success('新增成功')
	}
}
function handleUpdate(row: userType) {
	editUser.value = row
	updateModalVisible.value = true
}
function handleUpdateModalClose(isSuccess: boolean) {
	updateModalVisible.value = false
	if (isSuccess) {
		message.success('更新成功')
	}
}
async function handleDelete(row: userType) {
	const res = await userList.deleteItem(row.id as number)
	if (res.code) {
		message.success('删除成功')
	}
	reset()	
}
</script>

<template>
	<div class="userManage">
		<searchPanel :options="searchOptions"  @collapsed="handleSearchPanelcollapsed" @reset="reset" @search="search" />
		<div class="tableTool">
			<a-button type="primary" style="margin-right: 5px" @click="handleAdd" v-if="$hasAuth([actionKeys.add])">新增用户</a-button>
		</div>
		<a-table :dataSource="isSearching ? searchList : userList.list" :columns="columns" size="small" style="width: 100%" class="myTable" rowKey="name" :scroll="{ x: '100%', y: tableHeight }">
			<template #bodyCell="{ record, column }: any">
				<template v-if="column.key === 'operation'">
					<a-button type="primary" size="small" @click="handleUpdate(record)"  style="margin-right: 5px;" v-if="$hasAuth([actionKeys.update])">修改</a-button>
					<a-popconfirm title="确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="handleDelete(record)" placement="topLeft" v-if="$hasAuth([actionKeys.delete])">
						<a-button type="danger" size="small"  style="margin-right: 0px;" >删除</a-button>
					</a-popconfirm>
				</template>
			</template>
		</a-table>

		<Add :visible="addModalVisible" :title="addModalTitle" @close="handleAddModalClose" />
		<Update :visible="updateModalVisible" :title="updateModalTitle" :editUser="editUser" @close="handleUpdateModalClose" />
	</div>
</template>

<style scoped lang="less">
.userManage {
	.tableTool {
		padding: 10px 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}
</style>
